<template>
<div id="commonTag">
    <!-- 首页 tag -->
    <el-tag
    class="commonTagItem" 
    size="small" 
    @click="tagClick(homeData)"
    :effect="isHighlight(homeData) ? 'dark' : 'plain'">{{ homeData.label }}</el-tag>
    <!-- 动态 tag -->
    <el-tag closable 
    class="commonTagItem" 
    size="small" 
    v-for="item in routerList" 
    :key="item.path"
    @click="tagClick(item)"
    @close="tagClose(item)"
    :effect="isHighlight(item) ? 'dark' : 'plain'">{{ item.label }}</el-tag>
</div>
</template>

<script>
export default {
    name:'commonTag',
    data(){
        return {
                homeData:{ // 首页路由路径对象
                    label: '首页',
                    path: '/home',
                }
        }
    },
    mounted(){
        // console.log(this.$router);
    },
    methods:{
        isHighlight(item){ // 判断当前的路由路径是否为 tag 的路由对象，是则突出显示
            const routerPaht = this.$store.state.routerPaht
            return JSON.stringify(routerPaht) === JSON.stringify(item)
        },
        tagClick(item){ // tag 点击事件
            if(this.isHighlight(item)) return
            this.$router.push({
                path: item.path
            })
        },
        tagClose(item){ // tag 关闭事件
            this.$store.commit('REMOVEROUTERPAHT', item)
        },
    },
    computed:{
        routerList(){ // 将 VueX 的路由路径对象列表，映射过来
            return this.$store.state.routerPahtList
        },
    }
}
</script>

<style scoped>
#commonTag{
    height: 40px;
    min-height: 40px;
    width: auto;
    padding-left: 20px;
    overflow-x: overlay;
    overflow: hidden;
    display: flex;
    align-items: center;
}
#commonTag::-webkit-scrollbar{
    height: 6px;
    background-color: transparent;
}
#commonTag::-webkit-scrollbar-thumb{
    background-color: #666;
    border-radius: 6px;
}
.commonTagItem{
    margin-right: 10px;
    cursor: pointer;
}
.commonTagItem.el-tag--dark{
    cursor: default;
}
</style>